<template>
  <div class="dashboard-container">
    <panel-group @handleSetLineChartData="handleSetLineChartData" />

    <!-- 第一行：折线图 -->
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="24">
        <div class="chart-wrapper">
          <line-chart :chart-data="lineChartData" />
        </div>
      </el-col>
    </el-row>

    <!-- 第二行：三个图表 -->
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <radar-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <bar-chart />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import PanelGroup from './components/PanelGroup.vue'
import LineChart from './components/LineChart.vue'
import RadarChart from '@/components/Echarts/RadarChart.vue'
import PieChart from '@/components/Echarts/PieChart.vue'
import BarChart from '@/components/Echarts/BarChart.vue'

interface ChartData {
  expectedData: number[];
  actualData: number[];
}

interface LineChartData {
  [key: string]: ChartData;
}

const lineChartData: LineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}

export default defineComponent({
  name: 'Dashboard',
  components: {
    PanelGroup,
    LineChart,
    RadarChart,
    PieChart,
    BarChart
  },
  setup() {
    const currentChartData = ref(lineChartData.newVisitis)
    const radarData = ref([
      {
        value: [5000, 7000, 6000, 4000, 8000, 3000],
        name: '预算分配',
        type: 'radar'  // 确保设置类型
      },
      {
        value: [4000, 6000, 5500, 3500, 7500, 2500],
        name: '实际开销',
        type: 'radar'  // 确保设置类型
      }
    ])

    const handleSetLineChartData = (type: string) => {
      currentChartData.value = lineChartData[type]
    }

    return {
      lineChartData: currentChartData,
      radarData,
      handleSetLineChartData
    }
  }
})
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
  background-color: rgb(240, 242, 245);

  .chart-wrapper {
    background-color: #fff;
    padding: 16px;
    margin-bottom: 32px;
    height: 350px;
    border-radius: 4px;
    position: relative;
  }

  // 确保图表容器有正确的最小高度
  :deep(.el-row) {
    margin-bottom: 20px;
  }
}
</style>